<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>遍历整个页面</title>
    </head>
    <body>
        <h3>用递归的方式遍历整个页面所有节点</h3>

        <div class="wrapper">
            <ul>
                <li type="square" class="first second third">周一</li>
                <li type="square" class="first second third">周二</li>
                <li type="square" class="first second third">周三</li>
                <li type="square" class="first second third">周四</li>
                <li type="square" class="first second third">周五</li>
                <li type="square" class="first second third">周六</li>
                <li type="square" class="first second third">周日</li>
            </ul>

            <ul>
                <li type="1">星期一</li>
                <li type="1">星期二</li>
                <li type="1">星期三</li>
                <li type="1">星期四</li>
                <li type="1">星期五</li>
                <li type="1">星期六</li>
                <li type="1">星期日</li>
            </ul>

            <ul>
                <li type="circle">礼拜一</li>
                <li type="circle">礼拜二</li>
                <li type="circle">礼拜三</li>
                <li type="circle">礼拜四</li>
                <li type="circle">礼拜五</li>
                <li type="circle">礼拜六</li>
                <li type="circle">礼拜日</li>
            </ul>

            <ol>
                <li>
                    <h3>川菜</h3>
                    <ol>
                        <li type="disc">回锅肉</li>
                        <li type="disc">盐煎肉</li>
                    </ol>
                </li>
                <li>
                    <h3>其它</h3>
                    <ol>
                        <li type="disc">老碗鱼</li>
                        <li type="disc">红烧茄子</li>
                        <li type="disc">马踏飞燕</li>
                        <li type="disc">红绕狮子头</li>
                        <li type="disc">糖醋里脊</li>
                    </ol>
                </li>
            </ol>
        </div>

        <script type="text/javascript">

        function process( node ) {
            console.log( node.nodeType , node.nodeName , node.nodeValue );
            // 检查参数 node 是否是元素
            if( node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.ELEMENT_NODE ) {
                // 如果参数 node 是个元素，则需要处理其属性
                if( node.hasAttributes ){
                    /*
                    // 获取当前元素的所有属性名称组成的数组
                    let names = node.getAttributeNames();
                    for (let i = 0; i < names.length; i++) {
                        let e = names[i]; // 从 names 数组中获得单个属性名称
                        let attr = node.getAttributeNode( e ); // 根据属性名称获得属性节点
                        process( attr ); // 函数内部调用自身
                    }
                    */
                   let str = '' ;
                   let attrs = node.attributes ;
                   Array.from( attrs ).forEach( attr => {
                       str += attr.nodeName + '="' + attr.nodeValue + '"';
                       str += ',' ;
                   });
                   str = str.substring( 0 , str.lastIndexOf( ',' ) );
                   console.log( '\t' + str );
                }
                //参数 node 是个元素，则需要处理其子节点(包括文本节点、注释节点、元素节点)
                if( node.hasChildNodes() ){
                    let childs = node.childNodes ; // 获得当前元素的所有子节点
                    for (let i = 0; i < childs.length; i++) {
                        let n = childs[i];
                        if( n.nodeName != 'SCRIPT' ) {
                            process( n );
                        }
                    }
                }
            }
        }

        // 获取根节点
        const root = document.getRootNode();
        // 通过 process 函数来处理根节点
        process( root );

        </script>

    </body>
</html>